<template>
    <view class="page">
        <!-- <view class="container"> -->
        <!-- <uv-image class="pic" :src="model.downLoadList[index]" mode="aspectFit" lazyLoad width="100%" height="100%"
                @click="previewImages">
                <template v-slot:loading>
                    <uv-loading-icon color="#191919">加载中···</uv-loading-icon>
                </template>
</uv-image> -->

        <view class="content">
            <swiper class="swiper" circular autoplay interval="50000" current="0" @change="intervalChange">
                <swiper-item class="swiper-item" v-for="(item, i) in model.detailsList" :key="i">
                    <view class="swiper-item">
                        <image :src="item" mode="aspectFit" style="height: 100%;width: 100%;" @click="previewImages">
                        </image>
                        <!-- <uv-image class="swiper-item-img" :src="item" mode="aspectFit" width="100%"
                            height="100%" @click="previewImages"></uv-image> -->
                        <!-- <uv-image v-if="item" class="swiper-item-img" :src="item" mode="aspectFit" width="100%"
                            height="100%" @click="previewImages"></uv-image>
                        <view class="block" v-else>
                            <uv-icon class="block-icon" name="info-circle-fill" color="#999" size="40"></uv-icon>
                            <text class="text">本次生成图片可能有些偏差！</text>
                            <text class="text">请尝试重新生成</text>
                        </view> -->
                    </view>
                </swiper-item>
            </swiper>
            <view class="dots">
                <view class="dots-item" :class="{ actived: index == i }" v-for="(item, i) in model.detailsList"
                    :key="i">
                </view>
            </view>
        </view>
        <!-- <uv-image class="pic" :src="model.downLoadList[index]" mode="aspectFit" lazyLoad width="100%" height="100%"
				@click="previewOnOff = true">
				<template v-slot:loading>
					<uv-loading-icon color="#191919">加载中···</uv-loading-icon>
				</template>
			</uv-image>
			<previewImgs :data="model.detailsList" :onOff="previewOnOff" @accept="acceptPreviewOnOff" /> -->

        <!-- 单图 -->
        <!-- <uon-preview class="pic" :src="model.downLoadList[index]" mode="aspectFit"></uon-preview> -->

        <!-- Array<String> 展示 -->
        <!-- <view v-for="(item, index) in model.detailsList" :key="index">
				<uon-preview :src="item" :list="model.detailsList" :img-index="index">
					<image :src="item" mode="aspectFit" style="height: 686rpx;width: 100%;"></image>
				</uon-preview>
			</view> -->

        <!-- </view> -->
        <view class="btn-group" :class="{ 'evenly': model.scaleType || !model.reqJson }">
            <view class="icon" @click="download">
                <image src="@/static/images/icon_xiazai@2x.png"></image>
            </view>
            <view class="icon" @click="deleteModels">
                <image src="@/static/images/icon_shanchu@2x.png"></image>
            </view>
            <view v-if="!model.scaleType && model.reqJson" class="icon-btn" @click="selectedModel">创作同款</view>
            <navigator v-if="!model.scaleType && model.reqJson" class="icon-btn"
                :url="'/pages/highDefinition/highDefinition?id=' + id + '&img=' + model.detailsList[index] + '&index=' + index"
                hover-class="none" open-type="navigate">
                转高清修复大图</navigator>
        </view>

        <uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"
            bgColor="rgba(0,0,0,0.5)"></uv-loading-page>




    </view>
</template>

<script setup>
import {
    onLoad,
    onHide
} from '@dcloudio/uni-app'
import {
    ref
} from 'vue';

import {
    apiDeleteModels
} from '@/api/defaultApi.js'

import {
    downloadImg, previewModel
} from "@/utils/utils.js";


//pinia
import {
    storeToRefs
} from 'pinia'
import {
    useLoadingStore
} from "@/stores/useLoadingStore.js"
import {
    useModelStore
} from "@/stores/useModelStores.js"

// 获取pinia的数据
const LoadingStore = useLoadingStore()
const modelStore = useModelStore()

// 从pinia的数据中结构出值并做响应式
const {
    loading
} = storeToRefs(LoadingStore)

const index = ref(0)
const model = ref({})
const id = ref('')

const previewOnOff = ref(false)

onLoad((option) => {
    // item.id + '&img=' + item.detailsList[0]
    let item = option.item
    model.value = JSON.parse(decodeURIComponent(item))

    id.value = model.value.id

    console.log(model.value);

    if (model.value?.reqJson ?? '') {
        let reqJson = model.value.reqJson
        model.value.name = reqJson.style
        model.value.picBatch = reqJson.picBatch
        model.value.negative_prompt = reqJson.negative_prompt
    }
})

// 记录index
const intervalChange = (e) => {
    index.value = e.detail.current
}


//删除模型
const deleteModels = async () => {
    await apiDeleteModels([id.value])

    uni.showToast({
        title: '删除成功！',
        icon: "none"
    })


    let pages = getCurrentPages();
    let beforePage = pages[pages.length - 2]; // 上一页
    //调用上一页的生命周期函数

    uni.navigateBack({
        delta: 1,
        success: res => {
            beforePage.$vm.$.exposed.modelList.value = []
            beforePage.$vm.$.exposed.getModelList()
        }
    }, 1500)

}

//预览
const previewImages = () => {
    previewModel(model.value.detailsList, index.value)
}

//下载图片
const download = async () => {
    LoadingStore.setLoading(true)
    downloadImg(model.value.downLoadList[index.value])
}

// 选择model
const selectedModel = () => {
    model.value.id = model.value.reqJson.modelid
    model.value.cover = model.value.coverList[index.value]
    modelStore.setModel(model.value)

    uni.switchTab({
        url: "/pages/draw/draw"
    })
}

// 接收
const acceptPreviewOnOff = () => {
    previewOnOff.value = false
}

// 监听页面隐藏
onHide(() => {
    LoadingStore.setLoading(false)
})
</script>

<style lang="scss" scoped>
.container {
    height: 686rpx;
    background: #191919;
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 20rpx;

    .box-image {
        width: 100%;
        height: 100%;
    }



}

.content {
    width: 686rpx;
    margin: 0 auto;

    .swiper {
        width: 100%;
        height: 514rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background: #191919;

        .swiper-item {
            height: 100%;

            .swiper-item-img {
                width: 100%;
                height: 100%;
            }

            .block {
                width: 100%;
                height: 100%;
                background: #191919;
                display: flex;
                flex-direction: column;
                align-items: center;

                .block-icon {
                    margin-top: 140rpx;
                }

                .text {
                    margin-top: 40rpx;
                    color: #fff;
                    font-size: 24rpx;
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }

    .dots {
        width: 100%;
        height: 66rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .dots-item {
            width: 8rpx;
            height: 8rpx;
            background-color: #999;
            margin: 0 4rpx;
            border-radius: 4rpx;

            &.actived {
                width: 24rpx;
                background-color: #fff;
            }
        }
    }
}

.btn-group {
    width: 100%;
    height: 72rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &.evenly {
        justify-content: space-evenly;
    }

    .icon {
        width: 72rpx;
        height: 72rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 40rpx;
            height: 40rpx;
        }
    }

    .icon-btn {
        width: 248rpx;
        height: 72rpx;
        background: #e6e6e6;
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #000;
        font-weight: 500;
    }
}
</style>